<template>
<div id="ZS">
  <div class="flex-body">
    <div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden; background: #FFFFFF;">
      <div v-for="i in 40" :key="i" :style="(i - 1) % 5 < 2 ? 'width: 50%' : 'width: 33.33%'"
        style="height: 9%; color: #bbb; font-size: 0.36rem; opacity: 0.3; transform: rotate(-15deg); 
        display: inline-block; text-align: center;">{{ $store.state.userInfo.userName }}</div>
    </div> 
    <router-view/>
  </div>
  <div class="nav-box">   
    <div v-for="item in nav" :key="item.route" class="nav-item" :class="[ item.route, item.route == $route.name ? 'active' : '' ]" @click="change(item)">
      <div>{{ item.name }}</div>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class ZS extends Vue {

  nav: Array<any> = []

  sele: any = 'ZS_Statistics'

  change(nav: any) {
    this.$router.push( nav.route );
    this.sele = nav.route;
  }

  created() {
    this.nav = [
      { name: '统计', route: 'ZS_Statistics' },
      { name: '设备', route: 'ZS_Equipment' },
      { name: '订单', route: 'ZS_Order' },
      { name: '趋势', route: 'ZS_Shops' }
    ];
    this.sele = this.$route.name;
  }
  
};
</script>

<style lang="scss">
#ZS {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .flex-body {
    width: 100%; 
    height: 100%; 
    flex: 1 0; 
    overflow: auto;
  }
  .nav-box {
    width: 100%;
    height: 1.05rem;
    display: flex;
    flex-direction: row;
    background: #FFFFFF;
    border-top: 1px solid #F1F1F1;
    .nav-item {
      width: 100%;
      height: 100%;
      flex: 1 0;
      position: relative;
      &.ZS_Statistics {
        background: url(~@/assets/img/app/b1.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        &.active {
          background: url(~@/assets/img/app/a1.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        }
      }
      &.Publicstore{
        background: url(~@/assets/img/app/b3.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        &.active {
          background: url(~@/assets/img/app/a3.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        }
      }
      &.ZS_Equipment{
        background: url(~@/assets/img/app/b2.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        &.active {
          background: url(~@/assets/img/app/a2.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        }
      }
      &.ZS_Order{
        background: url(~@/assets/img/app/b3.png) center 0.18rem / 0.38rem 0.4rem no-repeat;
        &.active {
          background: url(~@/assets/img/app/a3.png) center 0.18rem / 0.38rem 0.4rem no-repeat;
        }
      }
      &.ZS_Shops{
        background: url(~@/assets/img/app/b5.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        &.active {
          background: url(~@/assets/img/app/a5.png) center 0.18rem / 0.38rem 0.38rem no-repeat;
        }
      }
      div {
        line-height: 0.5rem;
        font-size: 0.2rem;
        color: #333333;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
      }
      &.active {
        div {
          color: #18A3DC;
        }
      }
    }
  }
  .ft-blue {
    color: #18a3dc;
  }
  .ft-grade {
    color: #7f7f7f;             
  }
  .ft-org {
    color: #f6712e;
  }
  .tongji-box {
    width: 100%;
    overflow: hidden;
    .tongji-item {
      font-size: 0.3rem;
      color: #000000;
      width: 6.7rem;
      margin: 0 auto;
      padding: 0.15rem 0;
      border-bottom: 1px solid #ebebeb;
      .tongji-row {
        height: 0.6rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .page-blank {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-icon-arrow-left {
      font-size: 0.48rem;
      color: #969799;
    }
    .van-nav-bar__title {
      font-size: 0.36rem;
      color: #666;
    }
    .van-field__control {
      text-align: right;
    }
    .van-search__content .van-field__control {
      text-align: left;
    }
    .van-button--info {
      width: 6.7rem;
      height: 1rem;
      font-size: 0.32rem;
      margin: 0.5rem auto;
      background: #18a3dc;
      border: none;
      border-radius: 0.1rem;
      display: block;
    }
  }
}
</style>

